﻿@Scripts.Render("https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyBW-tAI5fYfORgGNNVmtXoQthz3YDxl1C4&sensor=false&libraries=places")

 
<script>


    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    var map;

    function initialize() {
        
        directionsDisplay = new google.maps.DirectionsRenderer();
        var iasi = new google.maps.LatLng(47.1666667, 27.6);
        //var brasov = new google.maps.LatLng(45.668285, 25.609703);
        var mapOptions = {
            zoom: 10,
            center: iasi
        }
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById('directions-panel'));

        calcRoute();

        function calcRoute() {

            var start = new google.maps.LatLng(currentTrip.InterestPoints[0].Lat, currentTrip.InterestPoints[0].Long);
            var end = new google.maps.LatLng(currentTrip.InterestPoints[currentTrip.InterestPoints.length - 1].Lat, currentTrip.InterestPoints[currentTrip.InterestPoints.length - 1].Long);

            var waypts = [];
            for (var i = 1; i < currentTrip.InterestPoints.length-1; i++) {
                var pos = new google.maps.LatLng(currentTrip.InterestPoints[i].Lat, currentTrip.InterestPoints[i].Long);
                waypts.push({
                    location: pos,
                    stopover: true
                });
                
            }

            var request = {
                origin: start,
                destination: end,
                waypoints: waypts,
                optimizeWaypoints: true,
                travelMode: google.maps.TravelMode.DRIVING
            };
            directionsService.route(request, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                    var route = response.routes[0];
                    var summaryPanel = $(".payment-online-form-right");
                    
                    // For each route, display summary information.
                    for (var i = 0; i < route.legs.length; i++) {
                        var routeSegment = i + 1;
                        summaryPanel.append('<b>Route Segment: ' + routeSegment + '</b><br>');
                        summaryPanel.append(route.legs[i].start_address + ' to ');
                        summaryPanel.append(route.legs[i].end_address + '<br>');
                        summaryPanel.append(route.legs[i].distance.text + '<br><br>');
                    }
                }
            });
        }
    }
    //google.maps.event.addDomListener(window, 'load', initialize);


</script>   
      <script>  
          function saveTrip() {

              var save = Object();
              save.Name = $("#name").val();
              save.Description = $("#description").val();
             // alert(save.Description);
             // alert(save.Name);
             
              $.ajax({
                  type: "POST",
                  contentType: "application/json; charset=utf-8",
                  url: "http://localhost:58872/Trip/SaveCurrentTrip",
                  data: JSON.stringify(save),
                  dataType: "json",
                  success: function (data) {
                      if (data.Error) {
                          alert(data.Error)
                      } else {
                          //location.reload(true);
                          alert("ok");
                      }
                  },
                  error: function (result) {
                      alert("error");
                  }
              });

          }
    </script>

     <script>
     var currentTrip;
         function getCurrentTrip() {
             //var data = Object();
             //data = JSON.stringify(data);

             $.ajax({
                 type: "GET",
                 contentType: "application/json; charset=utf-8",
                 url: "http://localhost:58872/trip/getcurrenttrip",
                 //data: data,
                 dataType: "json",
                 success: function (data) {
                     if (data.Error) {
                         alert(data.Error)
                     } else {
                         currentTrip = data;
                         var divplace = '<div class="image group"><div class="grid images_3_of_1"><img src="{0}" alt="" /><button  class="delete_button"/></div><div class="grid span_2_of_3"><h3><a href="#">{1}</a> </h3> </div><div class="clear"></div></div>';
                         for (i = 0; i < data.InterestPoints.length; i++) {
                             var divplace0 = divplace.replace("{0}", data.InterestPoints[i].Pictures);
                             var divplace1 = divplace0.replace("{1}", data.InterestPoints[i].Name);
                             $(".trip_places").append(divplace1);
                             //alert(divplace);                             
                         }
                         //map initialization
                         initialize();
                     }
                 },
                 error: function (result) {
                     alert(data.Error);
                 }
             });

         }

         $(document).ready(function () {
             getCurrentTrip();
         });
    </script>
    
	<div class="content_bottom">
		<!-- start sidebar_left   ---->
		<div class="sidebar_left">
		<div class="grid_1_of_2">
				<h4>Trip Places</h4>
				<div class="trip_places">
			@*	<div class="clear"></div>
				<div class="image group">
					<div class="grid images_3_of_1">
						<img src="../../Images/blog1.jpg" alt="" />
						<button  class="delete_button"/>
					</div>
					<div class="grid span_2_of_3">
						<h3><a href="#">Aldus PageMaker including versions of Lorem Ipsum.</a> </h3>
						<p>3 minutes ago</p>
				   </div>
				   <div class="clear"></div>
			   </div>		
				<div class="image group">
					<div class="grid images_3_of_1">
						<img src="../../Images/blog2.jpg" alt="" />
						<button  class="delete_button"/>
					</div>
					<div class="grid span_2_of_3">
						<h3><a href="#">Aldus PageMaker including versions...</a> </h3>
						<p>7 hours  ago</p>
				   </div>
				   <div class="clear"></div>
			   </div>
				<div class="image group">
					<div class="grid images_3_of_1">
						<img src="../../Images/blog3.jpg" alt="" />
						<button  class="delete_button"/>
					</div>
					<div class="grid span_2_of_3">
						<h3><a href="#">Aldus PageMaker including versions of Lorem Ipsum.</a> </h3>
						<p>23 hours  ago</p>
				   </div>
				   <div class="clear"></div>
			   </div>
				<div class="image group">
					<div class="grid images_3_of_1">
						<img src="../../Images/blog4.jpg" alt="" />
						<button  class="delete_button"/>
					</div>
					<div class="grid span_2_of_3">
						<h3><a href="#">Aldus versions of Lorem Ipsum....</a> </h3>
						<p>1 day ago</p>
				   </div>
				   <div class="clear"></div>
			   </div>			   			
				<div class="image group">
					<div class="grid images_3_of_1">
						<img src="../../Images/blog5.jpg" alt="" />
						<button  class="delete_button"/>
					</div>
					<div class="grid span_2_of_3">
						<h3><a href="#">Aldus PageMaker including versions of Lorem Ipsum.</a> </h3>
						<p>2 day ago</p>
				   </div>
				   <div class="clear"></div>
			   </div>*@
			</div>
			  <div class="attenders_title">
					<h4>Trip Details</h4>
				</div> 
			  <div id="attenders">
			  <div class="payment-online-form-right" >
						
						@*<ul>
							<li>
							    Length :			
							</li>
							<li>
								Time :		
							</li>
							<li>
							    Road Description : ( port, A,DN etc)
							</li>
							<li>
								Taxes : 	
  							</li>
							<li>
								Interdictions : 	
  							</li>
							
						</ul>*@
					</div>
				</div>
					<div class="clear"> </div>
				</div> 
			   
			   
			</div>
			
			
		</div>
		<!-- end sidebar_left   ---->
		<!-- start sidebar_right   ---->
		<div class="sidebar_right">
			<div class="span_1_of_3">
			<div class="span_1_of_3_img">
			 <div style="width:100%;height:400px" id="map-canvas"></div>	
             <div style="width:100%;max-height:300px;overflow-y:auto; background-color:white" id="directions-panel"></div>     
			
				<div class="clear"></div>
			</div>
			</div>
			
			<div class="comments">
			<div class="blog-section">
            
				<div class="blog-artical">
					<div class="blog-artical-head">
						<a class="artical-date" href="#"><span>@DateTime.Now.Day</span><label>@DateTime.Now.Month.ToString()</label></a>
					</div>
					 <div class="artical-info">
                      <br></br><br></br>
                        <h4><input id = "name"  class="tripname"  value="Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name';}" ></input></h4>
                        <div><textarea id= "description" class="descrp" value="Description" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Description';}"></textarea></div>
                        </div>
                    
					<div class="artical-related-info">
						<div class="artical-related-info-row">
							
							<!--<ul class="artical-related-info-row-right">
								<li><a class="author" href="javascript:edit(document.getElementById('descrp'));">Edit Description</a></li>
								<li><a class="articl-readmore" href="PhotoGallery">Photo Gallery</a></li>
							</ul>-->
                
							<div class="clear"> </div>
						</div>
					</div>
					
				</div>	
                
                <div>
                  </br>
                  <ul class="artical-related-info-row-right">
					 <li class="public_checkbox"><label class="myCheckbox"><input type="checkbox" name="test"/><span>&nbsp;Public</span></label></li>
                     <li><a class="publish_button" onclick="saveTrip()"> Save Trip! </a></li>
                     <!--<li><a class="follow_button" href=""> Attend! </a></li>-->
			      </ul>

                  </div>
				<!---//Blog comments and news----->
			
			<div class="clear"> </div>
			<!---start-comment-section----->
			<!--<div class="comment-section">
				<div class="comment-box">
					<div class="comment-people-pic">
						<a href="#"><img src="../../Images/comment-people1.png" alt="" /></a>
					</div>
					<div class="comment-info">
						<div class="comment-info-head">
							<div class="comment-info-head-left">
								<a href="Profile">John Deo</a>
							</div>
							<div class="comment-info-head-right">
								<ul>
									<li><a class="date-of-post" href="#">August 7,2013</a></li>
									<li><a class="replay" href="#">Replay</a></li>
								</ul>
							</div>
							<div class="clear"> </div>
							<div class="comment-place">
									<p>it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here',</p>
							</div>
							<div class="clear"> </div>
						</div>
					</div>
					<div class="clear"> </div>
				</div>
				<div class="comment-box-replay">
					<div class="comment-box-replay-icon">
						<a href="#"><img src="../../Images/replay.png" alt="" />
					</div>
					<div class="comment-box-replay-box">
					<div class="comment-people-pic replay-pic">
						<a href="#"><img src="../../Images/comment-people2.png" alt="" /></a>
					</div>
					<div class="comment-info replay-comment-info">
						<div class="comment-info-head">
							<div class="comment-info-head-left">
								<a href="#">John Deo</a>
							</div>
							<div class="comment-info-head-right">
								<ul>
									<li><a class="date-of-post" href="#">August 7,2013</a></li>
									<li><a class="replay" href="#">Replay</a></li>
								</ul>
							</div>
							<div class="clear"> </div>
							<div class="comment-place">
									<p>it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here',</p>
							</div>
							<div class="clear"> </div>
						</div>
					</div>
					<div class="clear"> </div>
				</div>
				<div class="clear"> </div>
			</div>
			<div class="comment-box-replay">
					<div class="comment-box-replay-icon">
						<a href="#"><img src="../../Images/replay.png" alt="">
					</a></div><a href="#">
					</a><div class="comment-box-replay-box comment-box-replay-box-replay-to"><a href="#">
					</a><div class="comment-people-pic replay-pic"><a href="#">
						</a><a href="#"><img src="../../Images/comment-people3.png" alt=""></a>
					</div>
					<div class="comment-info replay-comment-info">
						<div class="comment-info-head">
							<div class="comment-info-head-left">
								<a href="#">John Deo</a>
							</div>
							<div class="comment-info-head-right">
								<ul>
									<li><a class="date-of-post" href="#">August 7,2013</a></li>
									<li><a class="replay" href="#">Replay</a></li>
								</ul>
							</div>
							<div class="clear"> </div>
							<div class="comment-place">
									<p>it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here',</p>
							</div>
							<div class="clear"> </div>
						</div>
					</div>
					<div class="clear"> </div>
				</div>
				<div class="clear"> </div>
			</div>
			<div class="comment-box-replay">
					<div class="comment-box-replay-icon comment-box-replay-icon-right">
						<a href="#"><img src="../../Images/replay-right.png" alt="" />
					</div>
					<div class="comment-box-replay-box comment-box-replay-box-left">
					<div class="comment-people-pic replay-pic">
						<a href="#"><img src="../../Images/comment-people4.png" alt="" /></a>
					</div>
					<div class="comment-info replay-comment-info">
						<div class="comment-info-head">
							<div class="comment-info-head-left">
								<a href="#">John Deo</a>
							</div>
							<div class="comment-info-head-right">
								<ul>
									<li><a class="date-of-post" href="#">August 7,2013</a></li>
									<li><a class="replay" href="#">Replay</a></li>
								</ul>
							</div>
							<div class="clear"> </div>
							<div class="comment-place">
									<p>it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here',</p>
							</div>
							<div class="clear"> </div>
						</div>
					</div>
					<div class="clear"> </div>
				</div>
				<div class="clear"> </div>
			</div>
			<div class="comment-box">
					<div class="comment-people-pic">
						<a href="#"><img src="../../Images/comment-people5.png" alt="" /></a>
					</div>
					<div class="comment-info">
						<div class="comment-info-head">
							<div class="comment-info-head-left">
								<a href="#">John Deo</a>
							</div>
							<div class="comment-info-head-right">
								<ul>
									<li><a class="date-of-post" href="#">August 7,2013</a></li>
									<li><a class="replay" href="#">Replay</a></li>
								</ul>
							</div>
							<div class="clear"> </div>
							<div class="comment-place">
									<p>it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here',</p>
							</div>
							<div class="clear"> </div>
						</div>
					</div>
					<div class="clear"> </div>
				</div>
		</div>-->
		</div>
			</div>
			
			
		</div>	
		<!-- end sidebar_right   ---->
		</div>	
		<!-- end bottom_style   ---->
		<div class="clear"></div>
		</div>
<!-- end wrapper   ---->
	</div>
</div>


